<script setup lang="ts">
import { ref } from 'vue'
import '../assets/disorder.css'
import useApi from '../useApi';
import msgModal from '../components/msgModal.vue'
const msgModalRef = ref(msgModal);
const showModal = (title,times=1000) => {
	if(msgModalRef.value){
		msgModalRef.value.openMsg(title,times);
	}
}
const inputKeyNum =  (event) =>  {
    phoneNumSearch.value = phoneNumSearch.value+event.target.innerText;
}
const deleteKeyNum =  () =>  {
    phoneNumSearch.value = phoneNumSearch.value.substring(0,phoneNumSearch.value.length-1);
}
const clearKeyNum =  () =>  {
	phoneNumSearch.value = '';
}
let phoneNumSearch = ref(''),memberSearchShow = ref(false),orderList:any = ref({});
let orderDetailShow = ref(false),orderInfoDetail:any = ref({});
let address:any = ref({});
const orderDetail = async(id) => {
	orderDetailShow.value = true;
	let bodyData = ref({});
    bodyData.value = {
        id:id
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
    let res:any = await useApi('order/getDorderDetail',options); 
    if(res.code == 1){
        orderInfoDetail.value = res.data.detail;
		address.value = res.data.address;
    }else{
        showModal(res.msg);
    }
}
const searchOrderInfo = () =>{
	getOrderInfo();
}
const getOrderInfo = async()=>{
    let bodyData = ref({});
    bodyData.value = {
        phone:phoneNumSearch.value
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
    let res:any = await useApi('order/getDorder',options); 
    if(res.code == 1){
        orderList.value = res.data;
    }else{
        showModal(res.msg);
    }
}
</script> 
<template>
	<msgModal ref="msgModalRef"/>
	<main class="disorder">
		<Transition name="memberRechargeSearch">
			<div class="memberRechargeSearchModel" v-show='memberSearchShow'>
				<div class="modelInfo">
					<div class="numKey">
						<button @click="inputKeyNum" class="key">1</button>
						<button @click="inputKeyNum" class="key">2</button>
						<button @click="inputKeyNum" class="key">3</button>
						<button @click="inputKeyNum" class="key">4</button>
						<button @click="inputKeyNum" class="key">5</button>
						<button @click="inputKeyNum" class="key">6</button>
						<button @click="inputKeyNum" class="key">7</button>
						<button @click="inputKeyNum" class="key">8</button>
						<button @click="inputKeyNum" class="key">9</button>
						<button @click="clearKeyNum" class="key">清空</button>
						<button @click="inputKeyNum" class="key">0</button>
						<button @click="deleteKeyNum" class="key">删除</button>
					</div>
					<div class="footer">
						<el-button @click="memberSearchShow = false" class="cancel">确定</el-button>
						<el-button @click="memberSearchShow = false" class="cancel">取消</el-button>
					</div>
				</div>
			</div>
		</Transition>
		<Transition name="orderDetailModel">
			<div class="orderDetailModel" v-show='orderDetailShow'>
				<div class="modelInfo">
					<div class="addressinfo">配送地址：{{ address.province }}-{{ address.city }}-{{ address.area }}-{{ address.address }}-{{ address.name }}-{{ address.phone }}</div>
					<div class="detailtitle">
						<div class="title">名称</div>
						<div class="title">单价</div>
						<div class="title">数量</div>
						<div class="title">总价</div>
					</div>
					<div class="orderdetailinfo">
						<div class="detailtitle" v-for="(data,index) in orderInfoDetail" :key="index">
							<div class="title">{{ data.goodName }}</div>
							<div class="title">{{ data.goodPrice }}</div>
							<div class="title">{{ data.goodNum }}</div>
							<div class="title">{{ data.allPrice }}</div>
						</div>
					</div>
					<div class="orderfooter">
						<el-button @click="orderDetailShow = false" class="cancel">关闭</el-button>
					</div>
				</div>
			</div>
		</Transition>
		<div class="ordertop">
			<el-input  class="fromInput" @click="memberSearchShow = true;" v-model="phoneNumSearch" placeholder="手机号"></el-input>
			
            <el-button @click = "searchOrderInfo" class="button">查询</el-button>
		</div>
		<table class="orderinfo">
			<thead class="headerinfo">
				<tr class="tr">
					<td class="title">配送信息</td>
					<td class="title">金额</td>
					<td class="title">数量</td>
					<td class="title">时间</td>
					<td class="title">状态</td>
					<td class="operation">操作</td>
				</tr>
			</thead>
			<tbody class="forminfo">
				<tr class="tr" v-for="(data,index) in orderList" :key="index">
					<td class="title">{{ data.userPhone }}({{ data.userNickname }})</td>
					<td class="title">{{ data.allPrice }}</td>
					<td class="title">{{ data.allNum }}</td>
					<td class="title">{{ data.created_at }}</td>
					<td class="title">{{ data.statusTitle }}</td>
					<td class="operation">
						<el-button @click="orderDetail(data.id)" class="cancel">详情</el-button>
					</td>
				</tr>
			</tbody>
		</table>
    </main>
</template>